import React, { useEffect, useState } from "react";
import Logo from "../../../public/assets/home/logo-title.svg";
import CollspanIcon from "../../../public/assets/home/collspan-icon.svg";
import Info from "../../../public/assets/home/info.svg";
import { SecondMenuItem, PrimaryMenuItem, ThirdMenuItem } from "../../components/button";
import LabelItem from "../../components/item";
import MainButton from "../../components/main-menu";
import MenuGroup from "../../components/menu-group";
import Panel from "../../components/panel";
import SixButton from "../../components/six-button";

import IconFace from "../../../public/assets/icon/icon-face.svg";
import IconTop from "../../../public/assets/icon/icon-top.svg";

import ue4 from "ue4";
import ue from "ue";

import "./index.less";
import service from "../../service";

const primaryMenuData = [
    { label: "3D场布", value: "3DCB" },
    { label: "模拟建造", value: "MNJZ" },
    { label: "质量跟踪", value: "ZLGZ" },
    { label: "安全跟踪", value: "AQGZ" },
    { label: "人员跟踪", value: "RYGZ" },
];
const secondMenuData = [
    {
        label: "塔吊",
        value: "TADIAO",
        children: [
            { label: "单塔", value: "DANTA" },
            { label: "群塔", value: "QUNTA" },
        ],
    },
    { label: "施工电梯", value: "SGDT" },
    { label: "摄像头", value: "SXT" },
    { label: "智能广播", value: "ZNGB" },
    { label: "劳务闸机", value: "LWZJ" },
];

const mainMenuData = [
    {
        label: "数字工地",
        value: "SZGD",
    },
];

const sixButtonData1 = [
    {
        icon: <IconFace className="button-icon" />,
        label: "正视",
        value: "ZHENGSHI",
    },
    {
        icon: <IconTop className="button-icon" />,
        label: "俯视",
        value: "FUSHI",
    },
];
const sixButtonData2 = [
    {
        label: "吊钩",
        value: "DIAOGOU",
    },
    {
        label: "吊臂",
        value: "DIAOBI",
    },
    {
        label: "塔司",
        value: "TASI",
    },
];

function emitUE4Event(eventType, data) {
    if (ue4) {
        ue4(eventType, data, function (v) {});
    }
}

export default params => {
    let [primaryMenuVisible, setPrimaryMenuVisible] = useState(false);
    let [secondMenuVisible, setSecondMenuVisible] = useState(false);
    let [panelVisible, setPanelVisible] = useState(false);
    let [toolBarVisible, setToolBarVisible] = useState(false);

    let [primaryMenuState, setPrimaryMenuState] = useState("");
    let [secondMenuState, setSecondMenuState] = useState("");

    let [dataSource, setDataSource] = useState({
        aveEffect: "0",
        aveUpNum: "0",
        aveWeigh: "0",
        aveWorkingTime: "0min",
        busyLevel: "空闲",
        workingCraneNum: 0,
    });

    let [sceneState, setSceneState] = useState("all");

    useEffect(() => {
        if (ue && ue.interface && ue.interface.toggleEvent) {
            ue.interface.toggleEvent = function (data) {
                console.log();
            };
        }
        //service.queryTownerEffect().then(setDataSource);
    }, []);

    return (
        <div className="page">
            <div className="header">
                <Logo className="header-logo"></Logo>
                <Info className="header-info"></Info>
            </div>
            <div className="page-side page-side-left">
                <div className="side-data"></div>
                <div className="primary-menu-group" style={{ display: primaryMenuVisible ? "" : "none" }}>
                    <MenuGroup className={primaryMenuState} button={PrimaryMenuItem} data={primaryMenuData}></MenuGroup>
                    <CollspanIcon
                        className="collspan-icon"
                        style={{
                            transform: `rotate(${primaryMenuState == "scale-down-ver-bottom" ? "180deg" : "0"})`,
                        }}
                        onClick={() => {
                            setPrimaryMenuState(primaryMenuState == "scale-down-ver-bottom" ? "scale-up-ver-bottom" : "scale-down-ver-bottom");
                        }}></CollspanIcon>
                </div>
            </div>
            <div className="page-side page-side-right" style={{ display: panelVisible ? "" : "none" }}>
                <Panel isOpen={true}>
                    <LabelItem label="繁忙程度">{dataSource.busyLevel}</LabelItem>
                    <LabelItem label="工作塔吊台数">{dataSource.workingCraneNum}</LabelItem>
                    <LabelItem label="平均吊次/台">{dataSource.aveUpNum}</LabelItem>
                    <LabelItem label="平均吊重/台">{dataSource.aveWeigh}</LabelItem>
                    <LabelItem label="平均工作时长/台">{dataSource.aveWorkingTime}</LabelItem>
                    <LabelItem label="平均工效/台">{dataSource.aveEffect}</LabelItem>
                </Panel>
            </div>
            <div className="footer-left">
                <MainButton
                    className="button-main"
                    onMainMenuClick={v => {
                        setPrimaryMenuVisible(v == "visible");
                    }}
                    onMenuClick={e => {
                        let data = mainMenuData.find(el => el.value == e);
                        let isSecond = data.value == "SZGD";
                        setSecondMenuVisible(isSecond);
                        setSecondMenuState(isSecond ? "scale-up-hor-left" : "scale-down-hor-left");
                        emitUE4Event(
                            "event_menu",
                            mainMenuData.find(el => el.value == e)
                        );
                    }}></MainButton>
            </div>
            <div className="second-menu-group" style={{ display: secondMenuVisible ? "" : "none" }}>
                <MenuGroup
                    onClick={node => {
                        emitUE4Event("event_menu", node);
                        setPanelVisible(["塔吊", "单塔", "群塔"].includes(node.label));
                        setToolBarVisible(node.value == "QUNTA");
                    }}
                    className={secondMenuState}
                    style={{ width: "100%", display: "flex" }}
                    button={SecondMenuItem}
                    data={secondMenuData}></MenuGroup>
            </div>
            <div className="right-tool-bar" style={{ display: toolBarVisible ? "" : "none" }}>
                {sceneState == "all" ? (
                    <SixButton
                        defaultValue={"FUSHI"}
                        onMenuClick={data => {
                            emitUE4Event("event_menu", data);
                        }}
                        data={sixButtonData1}></SixButton>
                ) : (
                    <SixButton
                        onMenuClick={data => {
                            emitUE4Event("event_menu", data);
                        }}
                        data={sixButtonData2}></SixButton>
                )}
            </div>
        </div>
    );
};
